<template>
	<div class="yun-cun-min">
		<div class="search">
			<el-form label-width="auto" inline>
				<el-form-item label="时间筛选">
					<el-date-picker type="date" placeholder="选择时间" />
				</el-form-item>
			</el-form>
			<el-form label-width="auto" inline>
				<el-form-item label="关键字">
					<el-input placeholder="搜索内容">
						<template #append>
							<el-button class="s-btn" color="#8A1313">
								<template #icon> <IEpSearch /> </template>
							</el-button>
						</template>
					</el-input>
				</el-form-item>
			</el-form>
		</div>

		<div class="list">
			<div class="box" v-for="(item, index) in list" :key="index">
				<el-image class="cover" :src="cosPrefix + 'three-level/xiangmeng/fuwu/1.jpg'" fit="cover" />
				<div class="info">
					<div class="title">{{ item.name }}</div>
					<div class="content">
						{{ item.content }}
					</div>
					<!-- <span>电话：1111111111111111</span>
					<span>地址：xxxxxxxxxxxxxxxxxxx</span> -->
					<el-button class="btn">官方资讯</el-button>
					<span class="date-style">{{ item.date }}</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="CunMinFuWu">
import { useBaseStore } from "@/store/base";
const { cosPrefix } = useBaseStore();

const list = [
	{
		name: "【中国新闻】中国两村入选联合国世界旅游组织“最佳旅游乡村”",
		content: `一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容
		一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容,一段新闻内容一段...`,
		date: "2022-05-08",
		img: ""
	},
	{
		name: "【新华每日电讯】广西大寨村和重庆荆竹村入选联合国世界旅游组织“最...",
		content: `一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容,一段新闻内容一段...`,
		date: "2022-05-08",
		img: cosPrefix + "three-level/xiangmeng/fuwu/2.jpg"
	},
	{
		name: "重庆荆竹村:以现代创意活化传统乡愁",
		content: `一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容,一段新闻内容一段...`,
		date: "2022-05-08",
		img: ""
	},
	{
		name: "一个吸引全球目光的小山村",
		content: `一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容,一段新闻内容一段...`,
		date: "2022-05-08",
		img: ""
	},
	{
		name: "【重庆日报】武隆仙女山荆竹村跻身世界最佳旅游乡村",
		content: `一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容，一段新闻内容一段新闻内容一段新闻内容一段新闻内容一段新闻内容,一段新闻内容一段...`,
		date: "2022-05-08",
		img: ""
	}
];
</script>
<style lang="scss" scoped>
.yun-cun-min {
	padding: 40px 320px;
	.search {
		display: flex;
		margin-top: 40px;
		font-size: 20px;
		color: #000000;
		.s-btn {
			color: #ffffff;
			background-color: #8a1313;
		}
	}
}
.list {
	.box {
		display: flex;
		padding-bottom: 40px;
		margin-top: 40px;
		border-bottom: 1px dashed #bbbbbb;
		.cover {
			width: 430px;
			height: 242px;
		}
		.info {
			display: flex;
			flex: 1;
			flex-direction: column;
			width: 476px;
			padding-left: 40px;
			.title {
				overflow: hidden;
				font-size: 36px;
				font-weight: bold;
				color: rgb(25 25 25 / 100%);
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.content {
				display: -webkit-box;
				height: 74px;
				margin: 20px 0;
				overflow: hidden;
				font-size: 16px;
				color: rgb(102 102 102 / 100%);
				text-overflow: ellipsis;
				text-overflow: -webkit-ellipsis-lastline;
				-webkit-line-clamp: 3;
				line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			.btn {
				width: 85px;
				color: #c39f63;
				cursor: default;
				border-color: #c39f63;
				&:hover {
					background-color: transparent;
				}
			}
			.date-style {
				display: inline-block;
				margin-top: 20px;
				font-size: 16px;
				color: rgb(187 187 187 / 100%);
				vertical-align: bottom;
			}
		}
	}
}
</style>
